<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vue学习</title>
    <script src="./js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <!-- 
        v-if和v-show = "值为boolean类型"
        条件渲染,条件成立则显示，不成立则不显示
        v-if：如果条件不成立，则删除绑定的元素标签
        v-show:如果条件不成立，则通过css完成隐藏操作

        初始化时，v-if要比v-show要更快一些，原因在于，v-show在初始化时需要进行样式计算
        如果是频道的切换显示和隐藏，则v-show性能更优一些
        对于一些权限元素显示或隐藏操作，用v-if起到安全性
       -->
       <div class="show" v-show="show">我是show</div>
       <div class="if" v-if="show">我是if</div>
       <div class="if" v-if="'aaa'">我是if</div>

    </div>
    <script>
      const app = Vue.createApp({
        data() {
          return {
            show: true
          }
        }
      })
      app.mount('#app')
    </script>
  </body>
</html>
